// Connection status
#status-bar {
    transition: 1s ease-out;
    height: 5px;
}

// Expanded status bar
body {
    &:not(.expanded) {
        // Resize messenger
        #messenger {
            height: calc(100% - 5px) !important;
        }
    }

    &.expanded {
        &.status-warning,
        &.status-error {
            // Resize status bar if overlay is visible
            #status-bar {
                height: 50px;
            }

            // Resize messenger
            #messenger {
                height: calc(100% - 50px);
            }

            @media (max-width: 640px) {
                #status-bar {
                    height: 65px;
                }

                #messenger {
                    height: calc(100% - 65px);
                }
            }

            @media (max-width: 380px) {
                #status-bar {
                    height: 80px;
                }

                #messenger {
                    height: calc(100% - 80px);
                }
            }
        }
    }
}

#title .dot {
    fill: #ffffff;
}

.status-ok {
    #status-bar {
        background-color: $status-ok;
        height: 0;
    }

    &.visualize-state #title .dot {
        fill: $status-ok;
    }
}

.status-warning {
    #status-bar {
        background-color: $status-warning;
    }

    &.visualize-state #title .dot {
        fill: $status-warning;
    }
}

.status-error {
    #status-bar {
        background-color: $status-error;
    }

    &.visualize-state #title .dot {
        fill: $status-error;
    }
}

// Use green warning-color for the status bar when using
// the relayed data task (because connection loss on iOS is expected).
.status-task-relayed-data:not(.apns-non-voip) {
    &.status-warning #status-bar {
        background-color: $status-ok;
    }
}

#expanded-status-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    // Hide if inactive
    &:not(.active) {
        display: none;
    }

    // Loading indicator color
    .loading {
        $light-transparent: rgba(255, 255, 255, .2);
        @include loading-spinner(26px, 3px, #ffffff, $light-transparent);
    }

    > div {
        $half-transparent: rgba(0, 0, 0, .5);
        margin: 8px;
        text-shadow: 0 1px 1px $half-transparent;
        color: #ffffff;

        &:first-of-type {
            margin-left: 16px;
        }

        &:nth-last-of-type(2) {
            flex-grow: 1;
        }

        .progress {
            font-size: 32px;
        }
    }

    h1 {
        font-size: inherit;
    }
}
